import { config as defaultConfig } from '@gluestack-ui/config';
import { createConfig } from '@gluestack-ui/themed';

const config = createConfig({
  ...defaultConfig,
  tokens: {
    ...defaultConfig.tokens,
    colors: {
      ...defaultConfig.tokens.colors,
      white: '#FFFFFF',
      black: '#000000',
      primary0: '#F5F3FF',
      primary50: '#F5F3FF',
      primary100: '#DDD6FE',
      primary200: '#C4B5FD',
      primary300: '#A78BFA',
      primary400: '#8B5CF6',
      primary500: '#7C3AED',
      primary600: '#6D28D9',
      primary700: '#5B21B6',
      primary800: '#4C1D95',
      primary900: '#441e7d',
      primary950: '#441E7D',

      secondary0: '#FCFCFC',
      secondary50: '#f9fafb',
      secondary100: '#f3f4f6',
      secondary200: '#e4e7eb',
      secondary300: '#d1d5da',
      secondary400: '#9ca3af',
      secondary500: '#6b7280',
      secondary600: '#4b5563',
      secondary700: '#374151',
      secondary800: '#1f2937',
      secondary900: '#111827',
      secondary950: '#171717',

      backgroundDark0: '#FFFFFF',
      backgroundDark50: '#f9fafb',
      backgroundDark100: '#f3f4f6',
      backgroundDark200: '#e4e7eb',
      backgroundDark300: '#d1d5da',
      backgroundDark400: '#9ca3af',
      backgroundDark500: '#6b7280',
      backgroundDark600: '#4b5563',
      backgroundDark700: '#374151',
      backgroundDark800: '#1f2937',
      backgroundDark900: '#111827',
      backgroundDark950: '#171717',

      backgroundLight0: '#FFFFFF',
      backgroundLight50: '#f9fafb',
      backgroundLight100: '#f3f4f6',
      backgroundLight200: '#e4e7eb',
      backgroundLight300: '#d1d5da',
      backgroundLight400: '#9ca3af',
      backgroundLight500: '#6b7280',
      backgroundLight600: '#4b5563',
      backgroundLight700: '#374151',
      backgroundLight800: '#1f2937',
      backgroundLight900: '#111827',
      backgroundLight950: '#171717',

      backgroundLightError: '#FEF1F1',
      backgroundDarkError: '#2E2020',
      backgroundLightWarning: '#FFF4EB',
      backgroundDarkWarning: '#2E231B',
      backgroundLightSuccess: '#EDFCF2',
      backgroundDarkSuccess: '#1C2B21',
      backgroundLightInfo: '#EBF8FE',
      backgroundDarkInfo: '#1A282E',
      backgroundLightMuted: '#F6F6F7',
      backgroundDarkMuted: '#252526',

      textLight0: '#FFFFFF',
      textLight50: '#f9fafb',
      textLight100: '#f3f4f6',
      textLight200: '#e4e7eb',
      textLight300: '#d1d5da',
      textLight400: '#9ca3af',
      textLight500: '#6b7280',
      textLight600: '#4b5563',
      textLight700: '#374151',
      textLight800: '#1f2937',
      textLight900: '#111827',
      textLight950: '#171717',

      textDark0: '#FFFFFF',
      textDark50: '#f9fafb',
      textDark100: '#f3f4f6',
      textDark200: '#e4e7eb',
      textDark300: '#d1d5da',
      textDark400: '#9ca3af',
      textDark500: '#6b7280',
      textDark600: '#4b5563',
      textDark700: '#374151',
      textDark800: '#1f2937',
      textDark900: '#111827',
      textDark950: '#171717',

      borderLight0: '#FFFFFF',
      borderLight50: '#f9fafb',
      borderLight100: '#f3f4f6',
      borderLight200: '#e4e7eb',
      borderLight300: '#d1d5da',
      borderLight400: '#9ca3af',
      borderLight500: '#6b7280',
      borderLight600: '#4b5563',
      borderLight700: '#374151',
      borderLight800: '#1f2937',
      borderLight900: '#111827',
      borderLight950: '#171717',

      borderDark0: '#FFFFFF',
      borderDark50: '#f9fafb',
      borderDark100: '#f3f4f6',
      borderDark200: '#e4e7eb',
      borderDark300: '#d1d5da',
      borderDark400: '#9ca3af',
      borderDark500: '#6b7280',
      borderDark600: '#4b5563',
      borderDark700: '#374151',
      borderDark800: '#1f2937',
      borderDark900: '#111827',
      borderDark950: '#171717',

      info50: '#F5F3FF',
      info100: '#DDD6FE',
      info200: '#C4B5FD',
      info300: '#A78BFA',
      info400: '#8B5CF6',
      info500: '#7C3AED',
      info600: '#6D28D9',
      info700: '#5B21B6',
      info800: '#4C1D95',
      info900: '#441e7d',
    },
    space: {
      ...defaultConfig.tokens.space,
      'px': '1px',
      '0': 0,
      '0.5': 2,
      '1': 4,
      '1.5': 6,
      '2': 8,
      '2.5': 10,
      '3': 12,
      '3.5': 14,
      '4': 16,
      '4.5': 18,
      '5': 20,
      '6': 24,
      '7': 28,
      '8': 32,
      '9': 36,
      '10': 40,
      '11': 44,
      '12': 48,
      '16': 64,
      '20': 80,
      '24': 96,
      '32': 128,
      '35': 140,
      '40': 160,
      '48': 192,
      '56': 224,
      '64': 256,
      '72': 288,
      '80': 320,
      '96': 384,
      '1/2': '50%',
      '1/3': '33.333%',
      '2/3': '66.666%',
      '1/4': '25%',
      '2/4': '50%',
      '3/4': '75%',
      '1/5': '20%',
      '2/5': '40%',
      '3/5': '60%',
      '4/5': '80%',
      '1/6': '16.666%',
      '2/6': '33.333%',
      '3/6': '50%',
      '4/6': '66.666%',
      '5/6': '83.333%',
      'full': '100%',

      '25/2': '12%',
      '100/7': '14%',
      '6/25': '24%',
      '3/10': '30%',
      '9/20': '45%',
      '12/25': '48%',
      '7/10': '70%',

      '60': 60,
      '74': 74,
      '70': 70,
      '90': 90,
      '122': 122,
      '141': 141,
      '170': 170,
      '182': 182,
      '200': 200,
      '212': 212, //layoutPadding
      '234': 234, //qrBoxInner
      '275': 275,
      '354': 354,
      '384': 384,
      '372': 372, //imgWidth
      '422': 422,
      '441': 441,
      '480': 480,
      '508': 508, //boxSize
      '544': 544,
      'authcard': 544,
      '622': 622,
      '736': 736,
      '764': 764,
      'containerWidth': 1016,
    },
    borderWidths: {
      ...defaultConfig.tokens.borderWidths,
      '20': 20,
      '50': 50,
    },
    opacity: {
      ...defaultConfig.tokens.opacity,
    },
  },
  components: defaultConfig.components,
} as const);

export { config };

// Get the type of Config
type ConfigType = typeof config;

type Components = typeof defaultConfig.components;
// Extend the internal styled config

declare module '@gluestack-style/react' {
  interface ICustomConfig extends ConfigType {}
  interface ICustomComponents extends Components {}
}
